<template>
  <a-breadcrumb class="breadcrumb">
    <template v-for="(item, index) in breadcrumbList" :key="index">
      <a-breadcrumb-item v-if="!item.hidden?.()">
        <component
          :is="item.click ? 'a' : 'span'"
          v-on="{ click: item.click }"
          >{{ item.name }}</component
        >
      </a-breadcrumb-item>
    </template>
  </a-breadcrumb>
  <a-menu
    :selectedKeys="activeRoute"
    mode="horizontal"
    v-show="$route.name !== 'ProjectFillDetail'"
  >
    <a-menu-item
      v-for="item in menuList"
      :key="item.router"
      :disabled="item.disabled !== false"
    >
      <router-link
        :to="{ name: routeNamePrefix + item.routeName, params: route.params }"
        >{{ item.name }}</router-link
      >
    </a-menu-item>
  </a-menu>
  <div class="content">
    <router-view
      v-slot="{ Component }"
      :readOnly="!$route.fullPath.startsWith('/project')"
      :routeNamePrefix="routeNamePrefix"
    >
      <component :is="Component"></component>
    </router-view>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useProjectDetail } from "@/hooks/projectDetail";
const route = useRoute();
// 根据当前的基础路由判断激活的菜单项
const activeRoute = computed(() => [
  route.path.match(/\/\w+$/)?.[0] || "/basicinfo",
]);
const { breadcrumbList, menuList, routeNamePrefix } = useProjectDetail();
</script>
<style lang="scss" scoped>
.breadcrumb {
  margin-bottom: 16px;
}
.content {
  background-color: #fff;
  padding: 16px 64px;
}
</style>
